<?xml version="1.0" encoding="UTF-8"?>
<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core">
    <h:head>
        <title>Draft Result</title>
        <link href="css/global.css" rel="stylesheet" type="text/css" />
        <script src="http://code.jquery.com/jquery-latest.js"></script>
        <script src="js/global.js"></script>
        <link href="resources/DataTables-1.9.4/media/css/jquery.dataTables.css" rel="stylesheet" type="text/css"/>
        <script src="resources/DataTables-1.9.4/media/js/jquery.dataTables.js"/>
        <style type="text/css" media="screen">

        </style>
        <script language="javascript">
            $(document).ready(function(){
                $("[id$='draftByTeam']").dataTable();
                $("[id$='draftByRound']").dataTable();
                $("div.navy").load("navy.xhtml");
            });
        </script>
        <script>
            function toggle(tog){
                if(tog=="team"){
                    document.getElementById("byTeamDiv").style.visibility="visible";
                    document.getElementById("byRoundDiv").style.visibility="hidden";
                }else{
                    document.getElementById("byTeamDiv").style.visibility="hidden";
                    document.getElementById("byRoundDiv").style.visibility="visible";
                }
            }
        </script>
    </h:head>
    <h:body>
        <div id="background">
            <div class="navy">

            </div>
            <div id="content">
                <div id="draftResultDiv">
                    <span class="whiteHeader">Draft Result</span><br/><br/>
                    <button class="short" id="byTeam" onclick="toggle('team');"><span class="white">BY TEAM</span></button><button class="short" id="byRound" onclick="toggle('round');"><span class="white">BY ROUND</span></button><br/>
                    <div id="byTeamDiv">
                        <div style="float:left;">
                            <f:view>
                                <h:form>
                                    <h:dataTable binding="#{leagueDraftBean.teamTable}" value="#{leagueDraftBean.teams}" var="item">
                                        <f:facet name="header">
                                            <h:outputText value="Team Name" />
                                        </f:facet>
                                        <h:column>
                                            <h:commandButton value="#{item.name}" style="cursor:pointer;border:none; background:none;font-size:12px;">
                                                <f:ajax render=":teamform" listener="#{leagueDraftBean.selectTeam()}"/>
                                            </h:commandButton>
                                        </h:column>
                                    </h:dataTable>
                                </h:form>
                            </f:view>
                            </div>
                        <div class="space60" style="float:left;"></div>
                        <div style="float:left;">
                            <f:view>
                                <h:form id="teamform">
                                    <h:outputText value="#{leagueDraftBean.selectedTeam.name}" />
                                    <h:dataTable value="#{leagueDraftBean.getHistorybySeletedTeam()}" var="item">
                                        <h:column>
                                            <f:facet name="header">
                                                <h:outputText value="Team" />
                                            </f:facet>
                                            <h:outputText value="#{item.playerId.college}"/>
                                        </h:column>
                                        <h:column>
                                            <h:graphicImage url="#{item.playerId.photoURL}"/>
                                        </h:column>
                                        <h:column>
                                            <f:facet name="header">
                                                <h:outputText value="Name" />
                                            </f:facet>
                                            <h:outputText value="#{item.playerId.firstName} #{item.playerId.lastName}"/>
                                        </h:column>
                                        <h:column>
                                            <f:facet name="header">
                                                <h:outputText value="Position" />
                                            </f:facet>
                                            <h:outputText value="#{item.playerId.position}"/>
                                        </h:column>
                                        <h:column>
                                            <f:facet name="header">
                                                <h:outputText value="Round" />
                                            </f:facet>
                                            <h:outputText value="PICK #{item.totalPickNumber}"/>
                                        </h:column>
                                    </h:dataTable>
                                </h:form>
                            </f:view>
                        </div>
                    </div>
                    <div id="byRoundDiv" style="visibility:hidden; position:absolute; top: 110px; left: 40px;">
                        <div style="float:left;">
                            <f:view>
                                <h:form id="roundIndexForm">
                                    <h:dataTable id="roundIndexTable" binding="#{leagueDraftBean.roundTable}" value="#{leagueDraftBean.roundNumberList}" var="item">
                                        <f:facet name="header">
                                            <h:outputText value="Round" />
                                        </f:facet>
                                        <h:column>
                                            <h:commandButton value="#{item.toString()}" style="cursor:pointer;border:none; background:none;font-size:12px;">
                                                <f:ajax render=":roundform" listener="#{leagueDraftBean.selectRound()}"/>
                                            </h:commandButton>
                                        </h:column>
                                    </h:dataTable>
                                </h:form>
                            </f:view>
                        </div>
                        <div class="space60" style="float:left;"></div>
                        <div style="float:left;"> 
                            <f:view>
                                <h:form id="roundform">
                                    <h:outputText value="Round #{leagueDraftBean.selectedRound}" />
                                    <h:dataTable id="roundTable" value="#{leagueDraftBean.getHistorybyRound()}" var="item">
                                        <h:column>
                                            <f:facet name="header">
                                                <h:outputText value="Team" />
                                            </f:facet>
                                            <h:outputText value="#{item.playerId.college}"/>
                                        </h:column>
                                        <h:column>
                                            <h:graphicImage url="#{item.playerId.photoURL}"/>
                                        </h:column>
                                        <h:column>
                                            <f:facet name="header">
                                                <h:outputText value="Name" />
                                            </f:facet>
                                            <h:outputText value="#{item.playerId.firstName} #{item.playerId.lastName}"/>
                                        </h:column>
                                        <h:column>
                                            <f:facet name="header">
                                                <h:outputText value="Position" />
                                            </f:facet>
                                            <h:outputText value="#{item.playerId.position}"/>
                                        </h:column>
                                        <h:column>
                                            <f:facet name="header">
                                                <h:outputText value="Fantasy Team" />
                                            </f:facet>
                                            <h:outputText value="#{item.teamId.name}"/>
                                        </h:column>
                                    </h:dataTable>
                                </h:form>
                            </f:view>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </h:body>
</html>
